extends layout

append style
  link(rel="stylesheet", href="/docs/css/api.css")
  link(rel="stylesheet", href="/docs/css/inlinecpc.css")
  script(type="text/javascript" src="/docs/js/native.js")

block content
  h1 API Docs

  div.
    <div class="native-inline">
      <a href="#native_link#"><span class="sponsor">Sponsor</span> #native_company# — #native_desc#</a>
    </div>

  div.api-nav
    div.api-nav-content
      each item in docs
        - if (!item.hideFromNav)
          div.nav-item(id='nav-' + item.name)
            div.nav-item-title
              a(href='./api/' + item.name.toLowerCase() + '.html')
                | #{item.name}
            ul.nav-item-sub
              each prop in item.props
                li
                  a(href='./api/' + item.name.toLowerCase() + '.html#' + prop.anchorId)
                    | #{prop.string}

  each item in docs
    hr.separate-api
    h2(id=item.name, class="item-header")
      a(href='#' + item.name)
        | #{item.name}
    ul
      each prop in item.props
        li
          a(href='#' + prop.anchorId)
            | #{prop.string}
    each prop in item.props
      hr.separate-api-elements
      h3(id=prop.anchorId)
        a(href='#' + prop.anchorId)
          | #{prop.string}
      if prop.param != null
        h5 Parameters
        ul.params
          each param in prop.param
            - if (param.nested)
              ul(style="margin-top: 0.5em")
                li
                  | #{param.name}
                  | <span class="method-type">&laquo;#{param.types}&raquo;</span> !{param.description}
            - else
              li.param
                | #{param.name}
                | <span class="method-type">&laquo;#{param.types}&raquo;</span> !{param.description}
      if prop.return != null
        h5 Returns:
        ul
          li <span class="method-type">&laquo;#{prop.return.types}&raquo;</span> !{prop.return.description}
      if prop.type != null && prop.type !== 'method' && prop.type !== 'function'
        h5 Type:
        ul
          li <span class="method-type">&laquo;#{prop.type}&raquo;</span>
      div
        | !{prop.description}

  script.
    _native.init("CK7DT53U",{
      targetClass: 'native-inline'
    });
  script(type="text/javascript").
    var headers = document.querySelectorAll('.item-header');
    var navItems = document.querySelectorAll('.nav-item .nav-item-title');
    var navSubs = document.querySelectorAll('.nav-item-sub');
    var cur = '';
    window.addEventListener('scroll', function() {
      var scrollY = window.scrollY;
      var highlight = headers[0];
      for (var i = 0; i < headers.length; ++i) {
        if (headers[i].offsetTop > scrollY) {
          break;
        }
        highlight = headers[i];
      }
      if (highlight.id !== cur) {
        cur = highlight.id;
        for (var j = 0; j < navItems.length; ++j) {
          navItems[j].style.fontWeight = '';
        }
        for (j = 0; j < navSubs.length; ++j) {
          navSubs[j].style.display = 'none';
        }
        document.querySelector('#nav-' + highlight.id + ' .nav-item-title').style.fontWeight = 'bold';
        document.querySelector('#nav-' + highlight.id + ' .nav-item-sub').style.display = 'block';
      }
    });
